<template>
  <div>
    <ul class="ztree"></ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      categoryTreeData: "",
      categoryTreeObj: "",
      treeNodes:[],
      settings:{
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "parentId",
            rootPId: 0
          }
        },
        callback: {
          onClick: this.zTreeOnClick
        }
      }
      // cachedData: ""
    };
  },
  computed: {},
  mounted() {
    this.initCategoryList();
  },
  methods: {
    //初始化商品
    initCategoryList() {
      //将三级分类整个方法作为Promise方法，别人需要感知的时候，可以方便的等待方法运行完成
     return new Promise((resolve, reject) => {
        this.$http({
          url: this.$http.adornApiUrl("/pms/category/parent/-1"),
          method: "get"
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.categoryTreeData = data.data;
            //渲染树数据
            this.initZtree();
            resolve(data);
          } else {
            reject(data);
          }
        });
      });
    },
    //初始化ztree对象,ztree被点击的时候给父组件传递被选中的对象。
    initZtree() {
      // this.categoryTreeData.push({catId:0,name:"系统分类"});
      this.categoryTreeObj = $.fn.zTree.init(
        $("ul.ztree"),
        this.settings,
        this.categoryTreeData
      );
    },
    zTreeOnClick(event, treeId, treeNode) {
      console.log("点击了ztree", treeNode, this.categoryTreeObj);
      //向父组件传递刚才选中的treeNode值，如果要传递多个值，就依次写更多变量即可
      this.$emit("treeNode", treeNode, this.categoryTreeObj);
    }
  }
};
</script>
<style scoped>
</style>
